<!-- 文章管理 -->
<template>
  <el-card>
    <el-row>
      <el-form ref="form" :model="articleDto" inline label-suffix=":">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="articleDto.keywords"
            placeholder="请输入关键字"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
            <el-button icon="el-icon-plus" :loading="loading" type="primary" @click="addAppliance"
            >新增文章</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <page-table
      ref="multipleSelection"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column
        type="index"
        label="文章编号"
        width="100"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="title"
        label="文章标题"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <a class="article_title_a" @click="articleEdit(scope.row)">
            {{ scope.row.title }}
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="writer"
        label="作者"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="发布时间"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTime("yyyy-MM-dd hh:mm") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="enable"
        label="启用"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="scope.row.belong !== 'OTHER'"
            active-value="YES"
            inactive-value="NO">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column 
          label="操作" 
          align="center" 
          width="300" 
          fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="详情" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-search"
              @click="view(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-delete"
              @click="delAppliance(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </page-table>
  </el-card>
</template>
<script>

import { mapGetters } from "vuex";
import _ from "lodash";
// import ArticleDetiail from "./articleDetiail";
// import ArticleEdit from "./articleEdit";
export default {
  name: "articleList",
  components: {
    // ArticleEdit,
    // ArticleDetiail,
  },
  
  data() {
    return {
      pageData: {},
      loading: false,
      institutionId:null,
      articleDto: {
        pageIndex: "",
        pageSize: 10,
        keywords: "",
      },
      switchValue: true,
    };
  },
  computed: {
    ...mapGetters({
      articleList: "articleList",
    }),
  },

  methods: {
    getInfo() {
      this.API.deleteRecoveryInstitutionById().then((res) => {
        this.institutionId = res.data.id;
        console.log('id:',this.institutionId);
        this.getPageData();
      });
    },
    // 获取文章列表
    getPageData(val) {
      // this.loading = true;
      let tem = Object.assign(this.articleDto, val);
      this.API.getRecoveryArticlePageList(tem).then((ret) => {
        this.pageData = ret.data;
      });
    },

    // 查询
    search() {
      this.getPageData();
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    //   编辑
    articleEdit(row) {
      console.log("articleEdit", row.id);
      // window.open("/editor.html#/?articleID=" + row.id, "_blank");
      window.open(`/editor.html#/?articleID=${row.id}&institutionId=${this.institutionId}`, "_blank");
      this.checkEditorClose();
    },

    // 新增
    addAppliance() {
      console.log('新增',this.institutionId);
      window.open(`/editor.html#/?columnId=${1}&institutionId=${this.institutionId}`, "_blank");
      this.checkEditorClose();
    },
    // 详情
    view({id}) {
      this.$router.push({ name: "articleDetiail", query: { key: id } });
    },

    // 删除
    delAppliance({ id }) {
      this.$confirm("确认删除此数据?", "提示", { type: "warning" }).then(() => {
        this.API.deleteRecoveryArticleById({ id })
          .then((ret) => {
            this.success("删除成功!");
            this.getPageData();
          })
          .catch((err) => {
            this.warning(err);
          });
      });
    },
    // 开关
    changeStatus(e, row) {
      console.log("e:", e, "row:", row);
      this.$confirm(
        `是否确认${row.status == "1" ? "开启" : "关闭"}栏目显示？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (e == 1) {
            console.log("启用");
          } else if (e == 0) {
            console.log("关闭");
          }
        })
        .catch(() => {
          // 取消时回复原始开关
        });
    },
    checkEditorClose() {
      let code = setInterval(() => {
        let refresh = window.localStorage.getItem("refresh");
        if (refresh === "666") {
          window.localStorage.setItem("refresh", "777");
          clearInterval(code);
          this.search();
        }
      }, 2000);
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>
    
<style scoped lang="scss"></style>
    